import reactive from './reactive';
import Watcher from './watcher';
import computed from './computed';
import watch from './watch'

// 将传入数据响应式
const data = reactive({
  msg: 'hello world',
  number: 0,
});

window.onload = function () {
  // 依赖收集(实现发布订阅模式)
  new Watcher(() => {
    // 读取依赖
    // 数据更新时在触发依赖
    document.querySelector('#app').innerHTML = `msg is ${data.msg}`;
  });

  const numberPlusOne = computed(() => data.number + 1);

  // 渲染函数watcher
  new Watcher(() => {
    document.getElementById('app2').innerHTML = `
    computed: 1 + number 是 ${numberPlusOne.value}
  `;
  });

  watch(
    () => data.msg,
    (newVal, oldVal) => {
      console.log('newVal: ', newVal);
      console.log('old: ', oldVal);
    },
  );

  document.querySelector('#btn').addEventListener('click', () => {
    data.msg = data.msg + 'hhh';
  });

  document.querySelector('#btn2').addEventListener('click', () => {
    data.number++;
  });
};
